<div class="progress">
  <div *ngIf="isScheduleShow" class="btn-container" (click)="toggleCollapsed('shrink')">
    <!-- <button *ngIf="isScheduleShow" (click)="toggleCollapsed('shrink')" nz-button nzType="primary" style="height: 80px;">
      <i nz-icon type="double-right" theme="outline"></i>
    </button>
    <button *ngIf="!isScheduleShow" (click)="toggleCollapsed('expand')" nz-button nzType="primary"
      style="height: 80px;">
      <i nz-icon type="double-left" theme="outline"></i>
    </button> -->
    <img src="../../../assets/images/project/baseline-close.png" alt="">
  </div>
  <div class="progress-item" [ngStyle]="schedulePnlStyle">
    <!-- 进度容器 -->
    <div class="gantt-container" #ganttContainer (window:resize)="onWindowResize($event)">
      <div class="header-box">
        <span title="{{ganttService.currentGantt.title}}" *ngIf="ganttService.currentGantt"
          class="title">{{ganttService.currentGantt.title}}</span>
        <span>
          <i class="anticon anticon-menu-unfold" (click)="showGanttList()"></i>
        </span>
        <span class="button downloadXML" (click)="downloadXML()">下载xml</span>
        <span class="button import" (click)="importMMPHandle()">导入project</span>
        <span class="button create" (click)="createNewGantt()">新建进度</span>
      </div>
      <div class="gantt-panel">
        <div class="top-box" [ngStyle]="topPnlStyle">
          <div class="handlerArea">
            <div class="task-box" #taskbox [ngStyle]="leftPnlStyle" (mousewheel)="mousewheelhandler($event)">
              <app-task-box [leftPanel]="this.leftPanel.width"></app-task-box>
            </div>
            <div class="separate">
              <app-resize-bar [mode]="'between-hor'" [before]="leftPanel" [after]="rightPanel"></app-resize-bar>
            </div>
            <div class="gantt-box" [ngStyle]="rightPnlStyle" (mousewheel)="mousewheelhandler($event)">
              <app-gantt-box #ganttbox [showTask]="ganttService.showTask" [canvasInfo]="ganttService.canvasInfo"
                [rightPanelWidth]="rightPanel.width"></app-gantt-box>
            </div>
          </div>
          <div class="scrollBar zzj-scrollbar" (scroll)="scrollHandler($event)">
            <div class="scrollList" [style.height]="getScrollHeight() + 'px'"></div>
          </div>
        </div>
        <div class="bottom-box" [ngStyle]="bottomPnlStyle">
          <i class="anticon anticon-caret-down fold" (click)="switchBottom('down')" *ngIf="!isFold"></i>
          <i class="anticon anticon-caret-up fold" (click)="switchBottom('up')" *ngIf="isFold"></i>
          <div class="tools" style="margin-bottom: 12px">
            <app-tool-bar></app-tool-bar>
          </div>
          <ng-container *ngIf="ganttService.detailView">
            <div class="row">
              <p class="item">
                <label for="">任务名称：</label>
                <span>
                  <input nz-input [(ngModel)]="ganttService.currentTask.taskName">
                </span>
              </p>
              <p class="item edit" (click)="ganttHelperService.showSettings(ganttService.currentTask)">
                <label style="width: 60px" for="">前置任务：</label>
                <span>{{ganttHelperService.showRelation(ganttService.currentTask)}}</span>
              </p>
            </div>
            <div class="row">
              <p class="item">
                <label for="">计划开始时间：</label>
                <span>
                  <nz-date-picker [(ngModel)]="ganttService.currentTask.startDate"
                    (ngModelChange)="ganttService.updateAllTaskInfo(task)" [nzAllowClear]="false"></nz-date-picker>
                </span>
              </p>
              <p class="item">
                <label for="">计划完成时间：</label>
                <span>
                  <nz-date-picker [(ngModel)]="ganttService.currentTask.endDate"
                    (ngModelChange)="ganttService.updateAllTaskInfo(task)  " [nzAllowClear]="false"></nz-date-picker>
                </span>
              </p>
              <p class="item edit" (click)="ganttHelperService.showSettings(ganttService.currentTask)">
                <label style="width: 60px" for="">计划工期：</label>
                <span>{{ganttService.currentTask.showDuration}}</span>
              </p>
            </div>
            <div class="row">
              <p class="item">
                <label for="">实际开始时间：</label>
                <span>
                  <nz-date-picker [(ngModel)]="ganttService.currentTask.actualStartDate"
                    (ngModelChange)="ganttService.updateAllTaskInfo(task)" [nzAllowClear]="false"></nz-date-picker>
                </span>
              </p>
              <p class="item">
                <label for="">实际完成时间：</label>
                <span>
                  <nz-date-picker [(ngModel)]="ganttService.currentTask.actualEndDate"
                    (ngModelChange)="ganttService.updateAllTaskInfo(task)  " [nzAllowClear]="false"></nz-date-picker>
                </span>
              </p>
              <p class="item edit">
                <label style="width: 60px" for="">实际工期：</label>
                <span>{{ganttService.currentTask.actualDuration}}</span>
              </p>
            </div>
          </ng-container>
        </div>
      </div>
      <div class="gantt-mask" *ngIf="ganttService.maskInfo.showWarnning || ganttService.maskInfo.showLoading">
        <nz-spin *ngIf="ganttService.maskInfo.showLoading" [nzSize]="'large'" [nzTip]="'操作中...'"></nz-spin>
        <p class="warnning" *ngIf="ganttService.maskInfo.showWarnning">请选择或新建一个进度项目</p>
      </div>
    </div>
    <!-- 进度容器 -->
  </div>
  <div class="separate">
    <div class="resize-bar" style="height: 100%;width: 100%" (mousedown)="dragstartHandler($event)"></div>
    <!-- <div class="resize-bar" style="height: 100%;width: 100%"></div> -->
  </div>
</div>

<nz-modal class="settingModal" [nzVisible]="ganttHelperService.settingVisible" [nzTitle]="'设置'"
  [nzContent]="settingContent" (nzOnCancel)="ganttHelperService.settingCancel()"
  (nzOnOk)="ganttHelperService.settingSave()">
  <ng-template #settingContent>
    <div class="content" *ngIf="ganttHelperService.editInfo">
      <div class="name">
        <span>任务名称：</span>
        <input nz-input [(ngModel)]="ganttHelperService.editInfo.taskName">
      </div>
      <div class="duration">
        <span>工期：</span>
        <nz-input-number [(ngModel)]="ganttHelperService.editInfo.showDuration" [nzSize]="'small'" [nzMin]="1"
          [nzStep]="1"></nz-input-number>
      </div>
      <p class="line">
        <span>前置任务</span>
      </p>
      <div class="relation" *ngIf="ganttService.allTasks.length > 0 ">
        <div class="title">
          <span>标识</span>
          <span>任务名</span>
          <span>类型</span>
          <span>延隔天数</span>
        </div>
        <div class="row" *ngFor="let item of ganttHelperService.editInfo.relations;let i = index">
          <ng-container *ngIf="item.isDelete == 0">
            <div class="item">
              <!-- <nz-input [(ngModel)]="item.prevId"></nz-input> -->
              <nz-input-number [(ngModel)]="item.prevId" [nzSize]="'small'" [nzMin]="1"
                [nzMax]="ganttService.allTasks.length" [nzStep]="1"></nz-input-number>
            </div>
            <div class="item">
              <nz-select style="width: 160px;" placeholder="'选择一个任务'" [(ngModel)]="item.prevId" [nzShowSearch]="true">
                <nz-option *ngFor="let option of ganttService.allTasks" [nzLabel]="option.id+'：'+option.taskName"
                  [nzValue]="option.id">
                </nz-option>
              </nz-select>
            </div>
            <div class="item">
              <nz-select [(ngModel)]="item.relation" placeholder="'choose option'">
                <nz-option [nzLabel]="'完成-完成(FF)'" [nzValue]="PREVTYPE.FF"></nz-option>
                <nz-option [nzLabel]="'完成-开始(FS)'" [nzValue]="PREVTYPE.FS"></nz-option>
                <nz-option [nzLabel]="'开始-完成(SF)'" [nzValue]="PREVTYPE.SF"></nz-option>
                <nz-option [nzLabel]="'开始-开始(SS)'" [nzValue]="PREVTYPE.SS"></nz-option>
              </nz-select>
            </div>
            <div class="item">
              <nz-input-number [(ngModel)]="item.delay" [nzSize]="'small'" [nzMin]="0" [nzStep]="1"></nz-input-number>
            </div>
            <i class="anticon anticon-delete" (click)="ganttHelperService.deleteRelation(i)"></i>
            <i *ngIf="i == ganttHelperService.editInfo.relations.length-1" class="anticon anticon-plus"
              (click)="ganttHelperService.addRelation()"></i>
          </ng-container>
        </div>
      </div>
    </div>
  </ng-template>
</nz-modal>
<!-- 新建进度 -->
<!-- <nz-modal [nzVisible]="ganttService.newGanttModalView" [nzTitle]="'新建进度'" [nzContent]="progressContent" (nzOnCancel)="hideProgressModal($event)"
  (nzOnOk)="handleProgressOk()">
  <ng-template #progressContent>
    <div class="dialog-newProgress" *ngIf="ganttService.newGanttModalView">
      <div class="top-form">
        <div class="row">
          <p class="title">进度信息</p>
          <input nz-input placeholder="请输入进度名称" [(ngModel)]="ganttService.newGanttModel.ganttName">
        </div>
        <div class="row">
          <nz-date-picker placeholder="预计开工时间" style="width: 40%;" [(ngModel)]="ganttService.newGanttModel.startDate" [nzAllowClear]="false"></nz-date-picker>
          ~
          <nz-date-picker placeholder="预计完工时间" style="width: 40%;" [(ngModel)]="ganttService.newGanttModel.endDate" [nzAllowClear]="false"></nz-date-picker>
        </div>
      </div>
      <div class="expectDay">
        <p class="title">例外日期</p>
        <div class="expect-day">
          <div class="list">
            <div class="row" *ngFor="let group of ganttService.newGanttModel.exceptDate;let i = index">
              <input nz-input placeholder="请输入名称" [(ngModel)]="group.name">
              <nz-date-picker placeholder="开始时间" (ngModelChange)="changeStartDate(group)" [(ngModel)]="group.startDate" [nzAllowClear]="false"></nz-date-picker>
              ~
              <nz-date-picker placeholder="结束时间" (ngModelChange)="changeEndDate(group)" [(ngModel)]="group.endDate" [nzAllowClear]="false"></nz-date-picker>
              <i class="anticon anticon-delete" (click)="deletDate(i, ganttService.newGanttModel.exceptDate)"></i>
            </div>
          </div>
          <div class="addButton">
            <button nz-button (click)="addDate(ganttService.newGanttModel.exceptDate)">
              <span>增加例外日期</span>
            </button>
          </div>
        </div>
      </div>
      <div class="selectBox" *ngIf="ganttService.newGanttModel.prevGanttList.length > 0">
        <p class="title">选择参照的施组</p>
        <nz-select [(ngModel)]="ganttService.newGanttModel.parentId" [nzPlaceHolder]="'choose option'">
          <nz-option *ngFor="let option of ganttService.newGanttModel.prevGanttList" [nzLabel]="option.ganttName" [nzValue]="option.id">
          </nz-option>
        </nz-select>
      </div>
      <div class="selectBox">
        <p class="title">备注</p>
        <textarea row="4" nz-input [(ngModel)]="ganttService.newGanttModel.tips"></textarea>
      </div>
    </div>
  </ng-template>
</nz-modal> -->
<nz-modal [nzOkLoading]="isOkLoading" [(nzVisible)]="uploadProjectView && uploadForm" nzTitle="导入project"
  (nzOnCancel)="uploadProjectView =false" (nzOnOk)="uploadMPPHandle()">
  <div class="uploadMPPmodel">
    <div class="name">
      <span>进度名称：
        <input nz-input [(ngModel)]="uploadForm.uploadTitle">
      </span>
    </div>
    <div class="attachment">
      <!--<div class="attachment-item btn-link" (click)="inputFile.click()">选择附件</div>-->
      <div class="attachment-item">
        <span class="attachment-item btn-link" (click)="inputFile.click()">上传文件(只支持mpp格式)</span>
      </div>
      <div class="attachment-item">
        <span class="file-name" *ngIf="uploadForm.uploadMMP">{{uploadForm.uploadMMP.name}}</span>
      </div>
      <input #inputFile type="file" class="input-file" (change)="selectFile($event)" accept=".mpp"/>
    </div>
  </div>
</nz-modal>
<!-- gantt项目列表 -->
<nz-modal nzWrapClassName="ganttList" nzCancelText="关闭" [(nzVisible)]="ganttListView" nzTitle="进度列表"
  (nzOnCancel)="ganttListView = false" (nzOnOk)="ganttListView =false">
  <div class="listContent zzj-scrollbar">
    <p *ngIf="ganttService.ganttList.length == 0">暂无进度</p>
    <div class="scroll">
      <div class="item" *ngFor="let gantt of ganttService.ganttList">
        <span class="title" title="{{gantt.title}}" (click)="routerToGantt(gantt)">{{gantt.title}}</span>
        <i class="anticon anticon-edit" (click)="editGantt(gantt)"></i>
        <i class="anticon anticon-delete" (click)="deleteGantt(gantt.id)"></i>
      </div>
    </div>
  </div>
</nz-modal>
<nz-modal [(nzVisible)]="ganttCreateView" nzTitle="新建进度" (nzOnCancel)="ganttCreateView=false"
  (nzOnOk)="submitCreateGantt()">
  <div class="createGanttModal">
    <div class="row">
      <span class="title">进度名称：</span>
      <input nz-input [(ngModel)]="createForm.title">
    </div>
    <div class="row">
      <span class="title">选择时间区间：</span>
      <nz-range-picker [nzFormat]="'yyyy/MM/dd'" [(ngModel)]="createForm.dateFormat"></nz-range-picker>
    </div>
    <div class="row">
      <span class="title">创建人：{{createForm.author}}</span>
    </div>
  </div>
</nz-modal>
<nz-modal [(nzVisible)]="ganttEditView" nzTitle="编辑进度" (nzOnCancel)="ganttEditView=false" (nzOnOk)="submitEditGantt()"
  nzMaskClosable="false">
  <div class="createGanttModal" *ngIf="editForm">
    <div class="row">
      <span class="title">进度名称：</span>
      <input nz-input [(ngModel)]="editForm.title">
    </div>
    <div class="row">
      <span class="title">选择时间区间：</span>
      <nz-range-picker [nzFormat]="'yyyy/MM/dd'" [(ngModel)]="editForm.dateFormat"></nz-range-picker>
    </div>
    <div class="row">
      <span class="title">创建人：{{editForm.author}}</span>
    </div>
  </div>
</nz-modal>